Fix date range filter updating on each keystroke - #69955
Conversation
The date range filter inputs were calling onChange on every valid keystroke, which triggered URL search param updates and caused the editing state to be overwritten by the synced value from the parent. This made the date picker effectively unusable - typed values would appear to flash or get replaced with formatted values. Fix: Remove the auto-submit from the input change handler. The editing state stays local until the user explicitly applies it via any of these paths: - Clicking a date in the calendar popover - Pressing Enter in any date/time input - Clicking the new Apply button - Closing the popover (clicking outside / pressing Escape) closes: apache#69891
bbovenzi
left a comment
bbovenzi
left a comment
There was a problem hiding this comment.
Thanks!
- Please provide a gif/video of the fix
- Could we add a regression test while we're at it?
- Remove useCallback wrapper from applyDateRange (React compiler handles memoization)
- Remove onApply prop, handleKeyDown, onKeyDown, and Apply button from DateRangeInputs
- Popover onOpenChange already calls applyDateRange on close — button is redundant
- Remove onApply={applyDateRange} from DateRangeFilter.tsx
|
@anmolxlight This PR has a few issues that need to be addressed before it can be reviewed — please see our Pull Request quality criteria. Issues found:
What to do next:
There is no rush — take your time and work at your own pace. We appreciate your contribution and are happy to wait for updates. If you have questions, feel free to ask on the Airflow Slack. Note: This comment was drafted by an AI-assisted triage tool and may contain mistakes. Once you have addressed the points above, an Apache Airflow maintainer — a real person — will take the next look at your PR. We use this two-stage triage process so that our maintainers' limited time is spent where it matters most: the conversation with you. |
|
Fixed the ts-compile-lint-ui ordering issue and rebased onto latest main. Let's see what CI says. |
pierrejeambrun
changed the title
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
Do you mind providing a screenshot / screen recording to highlight the fix. "Before vs After".
This will help reviewing the PR and reproducing the issue locally thanks
| onClear, | ||
| onDateBlur, | ||
| onFocus, | ||
| onKeyDown, |
There was a problem hiding this comment.
This prop seems like dead code, it's never passed.
| onOpenChange={(details) => { | ||
| if (!details.open) { | ||
| // Submit the current editing state when the popover closes | ||
| applyDateRange(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
applyDateRange fires on every popover close. (Even when no edit has been done, a cheap check on the value could prevent this)
5 participants
Fix the date range filter inputs calling
onChangeon every valid keystroke, which triggered URL search param updates and caused the editing state to be overwritten by the synced value from the parent. This made the date picker effectively unusable - typed values would appear to flash or get replaced with formatted values.Fix: Remove the auto-submit from the input change handler. The editing state stays local until the user explicitly applies it via any of these paths:
closes: #69891
Was generative AI tooling used to co-author this PR?
Generated-by: Claude Code (DeepSeek V4 Flash) following the guidelines
Important
🛠️ Maintainer triage note for @anmolxlight · by
@potiuk· 2026-07-28 16:32 UTCSome review feedback from
pierrejeambrunis waiting on you:pierrejeambrun.The ball is in your court — you've been assigned to this PR. Push a fix or reply in each thread explaining why the feedback does not apply, then mark them resolved and ping the reviewer (
pierrejeambrun) for a final look.See the Pull Request quality criteria for how to fix each item. There is no rush.
Note: your branch is 298 commits behind
main— please rebase and push again to get up-to-date CI results.Automated triage — may be imperfect; a maintainer takes the next look. We use this two-stage triage process so maintainers' limited time goes to the conversation with you.